<script setup>
import { onMounted } from 'vue'
import annualWarningAreaStatistics from "@/api/warning/useWarning.js"
import * as echarts from 'echarts';

const get = annualWarningAreaStatistics()

let name = []
let value = []

onMounted(() => {
  get().then(res => {
    const data = res.data.data
    data.forEach(item => {
      name.push(item.gjSector)
      value.push(item.gjCount)
    })
  }).then( () =>{
    let chartDom = document.getElementById('main');
    let myChart = echarts.init(chartDom);
    let option;
    option = {
      title: {
        text: '年度告警区域统计'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: name
      },
      series: [
        {
          type: 'bar',
          data: value
        },
      ]
    };

    option && myChart.setOption(option);
  }).catch(err => {
    console.log(err)
  })
})
</script>

<template>
<div id="main" style="width: 100%;height:100%;"></div>
</template>

<style scoped>

</style>